<!--
 * @Date         : 2024-03-03 15:34:35
 * @LastEditTime : 2024-07-14 16:37:35
 * @description  : 
-->
<template>
  <div class="mask" v-if="dialogVisible"></div>
  <transition name="el-fade-in-linear">
    <div v-if="dialogVisible" class="pupoup">
      <div class="popup_content" v-html="config.text"></div>
      <div class="popup_bottom" v-if="config.type == 1">
        <el-button type="primary" color="#652E1B" @click="hide">
          继续做题
        </el-button>
        <el-button style="border-color: #855c4c; color: #855c4c" @click="ok">
          确认交卷
        </el-button>
      </div>
      <div class="popup_bottom popup_bottom1" v-if="config.type == 2">
        <el-button type="primary" color="#652E1B" @click="hide">
          {{ config.butonText }}
        </el-button>
      </div>
      <div class="popup_bottom popup_bottom1" v-if="config.type == 3">
        <el-button type="primary" color="#652E1B" @click="ok">
          {{ config.butonText }}
        </el-button>
      </div>
    </div>
  </transition>
</template>

<script setup>
const emit = defineEmits(["ok"]);
const dialogVisible = ref(false); //弹窗展示
const defineConfig = {
  type: 1,
  text: "",
  butonText: "返回答题",
};
const config = ref({});

// 弹窗剩余
const show = (obj) => {
  config.value = Object.assign(defineConfig, obj);
  dialogVisible.value = !dialogVisible.value;
};
const hide = () => {
  dialogVisible.value = false;
};
const ok = () => {
  dialogVisible.value = false;
  emit("ok");
};
// 暴露;
defineExpose({
  show,
  hide,
});
</script>

<style lang="scss" scoped>
.pupoup {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scale(1.6);
  width: 450px;
  height: 214px;
  background: #ccc;
  margin: auto;
  background-image: url("@/assets/popup-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 40px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  .popup_content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #855c4c;
  }
  .popup_bottom {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 50px;
    box-sizing: border-box;
  }
  .popup_bottom1 {
    justify-content: center;
  }
}
.mask {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  // background: #000;
}
</style>
